<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="front-common :: commonCss(~{::title},~{},~{},~{::style})">
    <title>JAVA课程在线考试</title>
    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
        }
        .filter {
            padding: 30px;
            padding-bottom: 10px;
            background-color: #ffffff;
            box-shadow: darkgrey 0 0 10px 0 ;
            margin-bottom: 40px;
        }
        .search-input{
            display: flex;
            justify-content: center;
            align-items:center;
            padding-left: 50px;
            padding-right: 50px;
            height: 70px;
        }
        .search-input input{
            height: 50px;
            width: 90%;
        }
        .search-input button{
            height: 50px;
            width: 10%;
        }
        .target-grid span{
            margin-right: 5px;
            white-space: nowrap;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 50%;
            cursor:pointer
        }
        .target-info2{
            margin: 5px 0 5px 0;
        }
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">

    <div th:replace="front-common::header('relation')"></div>

    <div class="layui-layout-body" style="margin-top: 50px;background-color: #f8f8f8;">
        <div class="filter">
            <div class="layui-container">
                <form class="layui-form" lay-filter="targetInfoForm">
                    <div class="layui-form-item search-input">
                        <input id="name" th:value="${param.name}" type="text" autocomplete="off" placeholder="搜索教师名或班级名" class="layui-input">
                        <button id="searchBtn" type="button" class="layui-btn"><i style="font-size: x-large" class="layui-icon layui-icon-search"></i> </button>
                    </div>
                </form>
            </div>
        </div>
        <div class="layui-container">

            <div class="flow-default layui-row layui-col-space30" id="TargetInfoFlow">
            </div>
        </div>

        <!-- 内容主体区域 -->

        <div th:replace="front-common::footer"></div>
    </div>

</div>
</body>

<script th:inline="javascript">
    layui.use(['form','flow'], function() {
        var form = layui.form;
        var flow = layui.flow;
        var $ = layui.jquery;

        $("#searchBtn").click(function () {
            var n = $("#name").val();
            window.location.href="/student/relation?name="+n;
        });
        loadFlow();
        
        function loadFlow(){
            flow.load({
                elem: '#TargetInfoFlow'
                ,end:
                    "<div class='layui-col-md12' style='text-align: center'>" +
                    "<hr/>" +
                    "<a>已经拉到底啦</a>" +
                    "</div>"
                , done: function (page, next) {
                    var name = [[${param.name}]];
                    $.ajax({
                        url:'/apply/listApply/'+page+'?name='+name,
                        type:"get",
                        data:form.val('targetInfoForm'),
                        dataType:"json",
                        success:function (data){
                            var lis = [];
                            layui.each(data.data.records, function(index, item){
                                lis.push("<div class='layui-col-md3 target-grid layui-panel'>\n" +
                                        "    <div class='target-info1'>\n" +
                                        "        <span style='color: #5FB878;font-size: 16px;'>"+item.teacherName+"</span>\n" +
                                        "    </div><br/>\n" +
                                        "    <div class='target-info2'>\n" +
                                        "        <span style='color: #404040;font-size: 14px;height:18px;'>"+item.clazzName+"</span>\n" +
                                        "        <button onclick='applyTeacherClazz("+item.teacherId+","+item.clazzId+");' class='layui-btn layui-btn-xs' style='float:right;'>成为他的学生\n" +
                                        "        </button>\n" +
                                        "    </div>\n" +
                                        "</div>");
                            });
                            next(lis.join(''), page  <  data.data.total/8);
                        }
                    });
                }
            });
        }

    })

    function applyTeacherClazz(teacherId, clazzId){
        layer.confirm('确实申请么？', {icon: 3, title:'提示'}, function(index){

            $.ajax({
                url : '/apply/save',
                type : 'post',
                contentType : 'application/json',
                dataType: 'json',
                data: JSON.stringify({
                    "msg":"",
                    "code":"",
                    "data": {
                        "teacherId": teacherId,
                        "clazzId": clazzId
                    }
                }),
                success : function(n) {
                    if (n.result.status) {
                        layer.msg("申请成功");
                    }else {
                        layer.msg("申请失败,"+n.result.msg);
                    }
                },
                error: function(n) {
                    layer.msg("申请失败,"+n.responseJSON.result.msg);
                }
            });
            layer.close(index);
        });
    };
</script>
</html>